// src/APP.vue

<template>
<div id="v-for-example">
  <div>显示过滤/排序后的结果</div>
  <div>方法一</div>
  <div v-for="n in eventNumbers">{{ n }} </div>

  <br>

  <div>方法二</div>
  <ul v-for="numbers in sets">
    <li v-for="n in even(numbers)">{{ n }}</li>
  </ul>
</div>
</template>

<script lang="ts">
import {   defineComponent, reactive, computed } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const numbers = reactive([1, 2, 3, 4, 5])

    const eventNumbers = computed(() => numbers.filter(number => number % 2 === 0))

    const sets = reactive([[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]])

    const even = (numbers) => (numbers.filter(number => number % 2 === 0))
    return {
      numbers,
      eventNumbers,
      sets,
      even
    }

  }
})
</script>